<template>
<!--有品秒杀-->
<div class="p-trap-wrap">
    <div class="container clearfix">
        <div class="h-sec-top clearfix"> 
            <div class="trap-top-main f1">
                <span class="h-subTit f1">有品秒杀
                    <span class="timestr">
                        <span class="iconfont icon-naozhong-copy"></span>
                        <span>12:00场</span>
                    </span>
                </span>
                <div class="countdown f1">
                    <div class="h-countdown-wrap">
                        <span class="time-item-home hour">23</span>
                        <span class="m-countdown-dot-home">:</span>
                        <span class="time-item-home minute">33</span>
                        <span class="m-countdown-dot-home">:</span>
                        <span class="time-item-home second">33</span>
                    </div>
                </div>
            </div>
            <span class="h-more" data-src data-target="_blank">
                <span rel="" target="_blank" href="https://m.xiaomiyoupin.com/r/secbuy?type=secbuy">更多</span>
                <a class="m-icons m-icons-more more-icon" data-src href="#!">
                    <span class="iconfont icon-xiangyoujiantou-copy"></span>
                </a>
            </span>
        </div>
        <div class="swiper-container swiper-container-horizontal">
            <div class="swiper-wrapper">
                <div class="swiper-slide swiper-slide-active" style="width: 266.25px;margin-right: 5px;">
                    <div class="m-goods-item-tainer first pro-item-trap margin-left-0">
                        <div class="bigtrap-img-tap-container">
                            <div class="small-item-img">
                                <div class="m-product-image-container undefined" style="width: 266px;height: 266px;">
                                    <div class="img-container" style="width:266px;height:266px;">
                                        <img src="https://img.youpin.mi-img.com/shopmain/4b37b938fc9d7b2b35a3d135dd1c2718.jpeg?w=800&h=800" alt="悦味不锈钢炒锅" style="width: 266px;height: 266px;">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bigtrap-box">
                            <p class="pro-info" title="悦味不锈钢炒锅">悦味不锈钢炒锅</p>
                            <p class="pro-price">
                                <span class="pro-unit">￥</span>
                                <span class="m-num">99</span>
                                <span class="market-price">
                                    <span class="pro-unit">￥</span>
                                    <span class="m-num">269</span>
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide swiper-slide-active" style="width: 266.25px;margin-right: 5px;">
                    <div class="m-goods-item-tainer first pro-item-trap margin-left-0">
                        <div class="bigtrap-img-tap-container">
                            <div class="small-item-img">
                                <div class="m-product-image-container undefined" style="width: 266px;height: 266px;">
                                    <div class="img-container" style="width:266px;height:266px;">
                                        <img src="https://img.youpin.mi-img.com/shopmain/f96a568790f328d1e44402de6db82a0c.jpg" alt="悦味不锈钢炒锅" style="width: 266px;height: 266px;">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bigtrap-box">
                            <p class="pro-info" title="珂岸控油洗面奶">珂岸控油洗面奶</p>
                            <p class="pro-price">
                                <span class="pro-unit">￥</span>
                                <span class="m-num">99</span>
                                <span class="market-price">
                                    <span class="pro-unit">￥</span>
                                    <span class="m-num">269</span>
                                </span>
                            </p>
                        </div>
                    </div>

                </div>
                <div class="swiper-slide swiper-slide-active" style="width: 266.25px;margin-right: 5px;">
                    <div class="m-goods-item-tainer first pro-item-trap margin-left-0">
                        <div class="bigtrap-img-tap-container">
                            <div class="small-item-img">
                                <div class="m-product-image-container undefined" style="width: 266px;height: 266px;">
                                    <div class="img-container" style="width:266px;height:266px;">
                                        <img src="https://img.youpin.mi-img.com/shopmain/4b37b938fc9d7b2b35a3d135dd1c2718.jpeg?w=800&h=800" alt="悦味不锈钢炒锅" style="width: 266px;height: 266px;">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bigtrap-box">
                            <p class="pro-info" title="悦味不锈钢炒锅">悦味不锈钢炒锅</p>
                            <p class="pro-price">
                                <span class="pro-unit">￥</span>
                                <span class="m-num">99</span>
                                <span class="market-price">
                                    <span class="pro-unit">￥</span>
                                    <span class="m-num">269</span>
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide swiper-slide-active" style="width: 266.25px;margin-right: 5px;">
                    <div class="m-goods-item-container first pro-item-trap margin-left-0">
                        <div class="bigtrap-img-tag-container">
                            <div class="small-item-img">
                                <div class="m-product-image-container undefined" style="width: 266px;height: 266px;">
                                    <div class="img-container" style="width:266px;height:266px;">
                                        <img src="https://img.youpin.mi-img.com/shopmain/4b37b938fc9d7b2b35a3d135dd1c2718.jpeg?w=800&h=800" alt="悦味不锈钢炒锅" style="width: 266px;height: 266px;">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bigtrap-box">
                            <p class="pro-info" title="悦味不锈钢炒锅">悦味不锈钢炒锅</p>
                            <p class="pro-price">
                                <span class="pro-unit">￥</span>
                                <span class="m-num">99</span>
                                <span class="market-price">
                                    <span class="pro-unit">￥</span>
                                    <span class="m-num">269</span>
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide swiper-slide-active" style="width: 266.25px;margin-right: 5px;">
                    <div class="m-goods-item-tainer first pro-item-trap margin-left-0">
                        <div class="bigtrap-img-tap-container">
                            <div class="small-item-img">
                                <div class="m-product-image-container undefined" style="width: 266px;height: 266px;">
                                    <div class="img-container" style="width:266px;height:266px;">
                                        <img src="https://img.youpin.mi-img.com/shopmain/4b37b938fc9d7b2b35a3d135dd1c2718.jpeg?w=800&h=800" alt="悦味不锈钢炒锅" style="width: 266px;height: 266px;">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bigtrap-box">
                            <p class="pro-info" title="悦味不锈钢炒锅">悦味不锈钢炒锅</p>
                            <p class="pro-price">
                                <span class="pro-unit">￥</span>
                                <span class="m-num">99</span>
                                <span class="market-price">
                                    <span class="pro-unit">￥</span>
                                    <span class="m-num">269</span>
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide swiper-slide-active" style="width: 266.25px;margin-right: 5px;">
                    <div class="m-goods-item-tainer first pro-item-trap margin-left-0">
                        <div class="bigtrap-img-tap-container">
                            <div class="small-item-img">
                                <div class="m-product-image-container undefined" style="width: 266px;height: 266px;">
                                    <div class="img-container" style="width:266px;height:266px;">
                                        <img src="https://img.youpin.mi-img.com/shopmain/4b37b938fc9d7b2b35a3d135dd1c2718.jpeg?w=800&h=800" alt="悦味不锈钢炒锅" style="width: 266px;height: 266px;">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bigtrap-box">
                            <p class="pro-info" title="悦味不锈钢炒锅">悦味不锈钢炒锅</p>
                            <p class="pro-price">
                                <span class="pro-unit">￥</span>
                                <span class="m-num">99</span>
                                <span class="market-price">
                                    <span class="pro-unit">￥</span>
                                    <span class="m-num">269</span>
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-button-next m-icons m-icons-next-hover"></div>
            <div class="swiper-button-prev m-icons m-icons-forward-hover swiper-button-disabled" ></div>
        </div>
    </div>
</div>
</template>

<script>

</script>

<style lang="less" scoped>
//有品秒杀标题
.p-trap-wrap{
    padding-top: 40px;
}
.container{
    width: 1080px;
    margin: 0 auto;
}
.clearfix:after, .clearfix:before{
    content:" ";
    display:table;
}
.h-sec-top{
    position: relative;
    z-index: 99;
    margin-bottom: 20px;
}
.f1{
    float: left;
}

.p-trap-wrap .trap-top-main .timestr{
    margin-left: 12px;
}

.p-trap-wrap .trap-top-main .timestr img{
    width: 18px;
    height: 18px;
    vertical-align: -15%;

}
.p-trap-wrap .trap-top-main .timestr span{
    margin-left: 3px;
    font-size: 18px;
    color: #a92112;
}
.h-sec-top .h-subTit{
    margin-left: 12px;
    font-size: 28px;
    color: #141313;
}
.p-trap-wrap .trap-top-main .countdown{
    height: 23px;
    margin-left: 6px;
    position: relative;
    top: 12px;
}
.h-countdown-wrap .time-item-home{
    display: inline-block;
    width: 23px;
    height: 23px;
    line-height: 23px;
    margin: 0 3px;
    color: #fff;
    text-align: center;
    font-size: 15px;
    background: #b04337;
}
.h-countdown-wrap .m-countdown-dot-home{
    display: inline-block;
    font-size: 15px;
    color: #b04337;
}
.h-sec-top .h-more{
    position: absolute;
    right: 0;
    top: 6px;
    height: 30px;
    color: #999;
    cursor: pointer;
}
.h-sec-top .h-more span{
    position: relative;
    bottom: 9px;
    font-size: 14px;
}
.h-sec-top .h-more .more-icon{
    height: 30px;
    width: 30px;
}
.m-icons-more{
    width: 30px;
    height: 30px;
    background-position: 0 --1134px;
}
.m-icons{
    display: inline-block;
}
//有品秒杀图片文字
.swiper-container{
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    z-index: 2;
}
.swiper-wrapper{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    box-sizing: content-box;
}
.swiper-slid{
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
}
.m-goods-item-container .first{
    margin-left: 0;
}
.margin-left-0{
    margin-left: 0;
}
.m-goods-item-container{
    position: relative;
    float: left;
    width: 266px;
    margin-left: 5px;
    text-align: center;
    background: #fff;
    transition: all .4s;
    cursor: pointer;
}

//有品秒杀图片
.bigtrap-img-tag-container{
    width: 266px;
    height: 266px;
    position: relative;
}
.hot-big-item-img,.small-item-img {
    display: block;
    width: 100%;
    text-align: center;
    overflow: hidden;
    background: #f8f8f8
}
.m-product-image-container {
    overflow: hidden
}
.m-product-image-container .img-container {
    overflow: hidden;
    display: inline-block
}
img {
    vertical-align: middle;
    border: none
}
//有品秒杀文字信息
.bigtrap-box {
    background: #faf6ef;
    padding-top: 13px;
    padding-bottom: 15px
}
.bigtrap-box .pro-info {
    color: #333;
    font-size: 19px;
    line-height: 23px;
    height: 23px;
    margin-top: 0
}
.m-goods-item-container .pro-info {
    color: #333;
    margin-top: 8px;
    font-size: 19px;
    line-height: 23px;
    height: 23px
}
.pro-desc,.pro-info {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}
.pro-info {
    height: 26px;
    line-height: 26px;
    text-align: center;
    margin-top: 10px;
    color: #333;
    font-size: 16px
}
//有品秒杀价格
.bigtrap-box .pro-price {
    text-align: center;
    margin-bottom: 0
}
.m-goods-item-container .pro-price {
    margin-top: 11px;
    margin-bottom: 0;
    height: 26px;
    line-height: 26px;
    color: #a92112
}

.pro-price {
    height: 26px;
    line-height: 26px;
    overflow: hidden;
    color: #c00000
}
.m-goods-item-container .pro-unit {
    font-size: 15px
}

.m-goods-item-container .m-num {
    font-size: 22px;
}

.pro-price .m-num{
    font-size: 22px;
}
.pro-flag,
.pro-ori,
.pro-unit {
    font-size: 22px;
}
//市场价
.pro-price .market-price {
    text-decoration: line-through;
    color: #333;
    margin-left: 5px;
}

.pro-price .market-price .pro-unit {
    font-size: 9px;
}


.pro-price .market-price .m-num {
    font-size: 14px
}
.m-goods-item-container .m-num {
    font-size: 22px
}

.progress-tag-con {
    text-align: center;
    height: 18px;
    padding-top: 2px;
    padding-bottom: 2px;
    overflow: hidden;
    display: inline-block;
}
.progress-tag-con .common-tag {
    display: inline-block;
    height: 18px;
    margin-left: 3px
}

.progress-tag-con .common-tag-text {
    padding: 0 6px;
    color: #fff;
    font-size: 13px;
    line-height: 18px
}

.progress-tag-con .common-tag-img,.progress-tag-con .common-tag-text {
    height: 18px;
    border-radius: 2px;
    vertical-align: bottom
}
</style>